<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../public/js/jquery.min.js"></script>
	</head>
	<style>
		
		* {
			margin: 0;
			padding: 0;
		}	
				body {
			background: #eee;
		}	
		.jq22 {
			width: 490px;
			margin: 30px auto;
		}
		.box {
			float: left;
			width: 100px;
			height: 100px;
			background: #EEE;
			margin: 10px;
			position: relative;
			display: inline;
		}
		.box a {
			display: block;
			width: 100px;
			height: 100px;
			overflow: hidden;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 9;
		}
		.boxBor {
			position: absolute;
			left: 0;
			top: 0;
			display: none;
			z-index: 4;
			background: black;
			background: -moz-linear-gradient(top, rgba(114, 114, 114, 0.8), rgba(114, 114, 114, 0.8));
		}
	</style>

	<body>

		<div class="boxBor"></div>

		<div class="jq22">
			<div class="box">
				<a href="#"></a><img width="100" height="100" src="../../public/images/店铺管理/vx.png" alt="" />
			</div>
			<div class="box">
				<a href="#"></a><img width="100" height="100" src="../../public/images/店铺管理/vx.png" alt="" />
			</div>
			<div class="box">
				<a href="#"></a><img width="100" height="100" src="../../public/images/店铺管理/vx.png" alt="" />
			</div>
			<div class="box">
				<a href="#"></a><img width="100" height="100" src="../../public/images/店铺管理/vx.png" alt="" />
			</div>
			<div class="box">
				<a href="#"></a><img width="100" height="100" src="../../public/images/店铺管理/vx.png" alt="" />
			</div>
			<div class="box">
				<a href="#"></a><img width="100" height="100" src="../../public/images/店铺管理/vx.png" alt="" />
			</div>
			<div class="box">
				<a href="#"></a><img width="100" height="100" src="../../public/images/店铺管理/vx.png" alt="" />
			</div>
			<div class="box">
				<a href="#"></a><img width="100" height="100" src="../../public/images/店铺管理/vx.png" alt="" />
			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				$('.box').bind('mouseover', function() {
					var oPosition = $(this).position();
					var oThis = $(this);
					if($(".boxBor").attr('deta-switch') !== 'true')
					{
						$(".boxBor").attr('deta-switch', 'true');
						$(".boxBor").css({
//							width: '100%',
//							height: $(window).height(),
//							left: '0px',
//							top: '0px',
//							opacity: 0,
							display: 'block'
						})
					}
					$(".boxBor").stop(false, false).animate({
						opacity: 0.8,
						left: oPosition.left + 10,
						top: oPosition.top + 10,
						width: oThis.width(),
						height: oThis.height()
					}, 250)
				});
			})
		</script>
	</body>

</html>